<template>
  <view class="content">
    <up-navbar title="前端开发实战" @rightClick="backClick" :autoBack="true">
    </up-navbar>
    <view class="search-box">
      <up-search
        v-model="searchValue"
        :show-action="true"
        placeholder="搜索消息"
        shape="square"
        @search="searchCourse"
        clearable
      ></up-search>
    </view>
    <!-- 聊天内容区域 -->
    <view class="chat-content" ref="chatContent">
      <view
        v-for="(item, index) in messageList"
        :key="index"
        :class="[
          'message-item',
          item.type === 'system'
            ? 'system'
            : item.from === 'teacher'
            ? 'left'
            : 'right',
        ]"
      >
        <template v-if="item.type !== 'system'">
          <up-avatar
            :src="item.from === 'teacher' ? teacherAvatar : studentAvatar"
            size="48"
          ></up-avatar>
          <view class="message-content">
            <view class="message-name" v-if="item.from === 'teacher'">{{
              teacherName
            }}</view>
            <view class="message-bubble" :class="[item.contentType]">
              <template v-if="item.contentType === 'text'">
                <text>{{ item.content }}</text>
              </template>
              <template v-if="item.contentType === 'image'">
                <up-image
                  :src="item.content"
                  mode="aspectFit"
                  class="message-image"
                  @click="previewImage(item.content)"
                ></up-image>
              </template>
              <template v-if="item.contentType === 'link'">
                <text class="link-title">{{ item.title }}</text>
                <text class="link-desc">{{ item.content }}</text>
              </template>
              <template v-if="item.contentType === 'file'">
                <up-icon
                  name="file-text-fill"
                  size="30"
                  color="#007AFF"
                ></up-icon>
                <view class="file-info">
                  <text class="file-name">{{ item.title }}</text>
                  <text class="file-size">{{ item.size }}</text>
                </view>
                <up-icon
                  name="download"
                  size="28"
                  color="#007AFF"
                  @click="downloadFile(item.content)"
                ></up-icon>
              </template>
              <template v-if="item.contentType === 'video'">
                <up-image
                  :src="item.cover"
                  mode="aspectFill"
                  class="video-cover"
                ></up-image>
                <up-icon
                  name="play-circle"
                  size="40"
                  color="#FFFFFF"
                  class="play-icon"
                ></up-icon>
                <text class="video-duration">{{ item.duration }}</text>
              </template>
            </view>
          </view>
        </template>
        <template v-else>
          <view class="system-message">
            <text>{{ item.content }}</text>
          </view>
        </template>
      </view>
    </view>

    <!-- 底部输入区域 -->
    <view class="input-area">
      <view class="toolbar">
        <up-icon
          name="plus-circle"
          size="30"
          color="#606266"
          @click="toggleMoreTools"
        ></up-icon>
        <up-icon
          name="&#xe67e;"
          customPrefix="iconfont"
          size="30"
          color="#606266"
          @click="toggleEmoji"
        ></up-icon>
      </view>

      <up-input
        v-model="inputValue"
        placeholder="请输入消息..."
        auto-height
        @confirm="sendMessage"
        class="message-input"
      ></up-input>

      <view class="toolbar">
        <up-icon
          name="mic"
          size="30"
          color="#606266"
          v-if="isInputMode"
          @click="toggleInputMode"
        ></up-icon>
        <up-button
          type="primary"
          size="mini"
          @click="sendMessage"
          v-if="inputValue.trim().length > 0"
        >
          发送
        </up-button>
      </view>
    </view>

    <!-- 底部工具栏扩展 -->
    <view class="tool-extend" v-show="showToolExtend">
      <view class="tool-item" @click="chooseImage">
        <up-icon name="photo-fill" size="40" color="#007AFF"></up-icon>
        <text>图片</text>
      </view>
      <view class="tool-item" @click="chooseVideo">
        <up-icon name="play-circle" size="40" color="#007AFF"></up-icon>
        <text>视频</text>
      </view>
      <view class="tool-item" @click="sendFile">
        <up-icon name="file-text" size="40" color="#007AFF"></up-icon>
        <text>文件</text>
      </view>
      <view class="tool-item" @click="takePhoto">
        <up-icon name="camera" size="40" color="#007AFF"></up-icon>
        <text>拍照</text>
      </view>
    </view>

    <!-- 表情选择器 -->
    <view class="emoji-panel" v-show="showEmojiPanel">
      <view class="emoji-group">
        <text
          class="emoji-item"
          v-for="(emoji, index) in emojiList"
          :key="index"
          @click="insertEmoji(emoji)"
          >{{ emoji }}</text
        >
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      inputValue: "",
      isInputMode: true,
      showToolExtend: false,
      showEmojiPanel: false,
      teacherAvatar: "https://picsum.photos/200/300?random=10",
      studentAvatar: "https://picsum.photos/200/300?random=20",
      teacherName: "张教授",
      messageList: [
        // 系统消息
        {
          type: "system",
          content: "今天 09:30",
        },

        // 教师发送的文字消息
        {
          type: "message",
          from: "teacher",
          contentType: "text",
          content: "同学们好，今天我们将学习前端框架Vue.js的基本原理",
        },

        // 学生发送的文字消息
        {
          type: "message",
          from: "student",
          contentType: "text",
          content: "老师，Vue和React哪个更适合初学者？",
        },

        // 教师发送的图片消息
        {
          type: "message",
          from: "teacher",
          contentType: "image",
          content: "https://picsum.photos/600/400?random=30",
        },

        // 教师发送的链接消息
        {
          type: "message",
          from: "teacher",
          contentType: "link",
          title: "Vue.js官方文档",
          content: "https://vuejs.org/",
        },

        // 教师发送的文件消息
        {
          type: "message",
          from: "teacher",
          contentType: "file",
          title: "Vue.js入门教程.pdf",
          content: "https://example.com/vue-tutorial.pdf",
          size: "2.4MB",
        },

        // 教师发送的视频消息
        {
          type: "message",
          from: "teacher",
          contentType: "video",
          content: "https://example.com/vue-intro.mp4",
          cover: "https://picsum.photos/600/400?random=40",
          duration: "03:45",
        },

        // 学生发送的表情消息
        {
          type: "message",
          from: "student",
          contentType: "text",
          content: "😊👍",
        },

        // 系统消息
        {
          type: "system",
          content: "刚刚",
        },
      ],
      emojiList: [
        "😊",
        "👍",
        "👏",
        "🤔",
        "🙌",
        "🎉",
        "💯",
        "🔥",
        "❓",
        "❗",
        "❕",
        "💡",
        "😀",
        "😃",
        "😄",
        "😁",
        "😆",
        "😅",
        "😂",
        "🤣",
        "😊",
        "😇",
        "🙂",
        "🙃",
        "😉",
        "😌",
        "😍",
        "🥰",
        "😘",
        "😗",
        "😙",
        "😚",
        "😋",
        "😛",
        "😝",
        "😜",
        "🤪",
        "🤨",
        "🧐",
        "🤓",
        "😎",
        "🤩",
        "🥳",
        "😏",
        "😒",
        "😞",
        "😔",
        "😟",
        "😕",
        "🙁",
        "☹️",
        "😣",
        "😖",
        "😫",
        "😩",
        "🥺",
        "😢",
        "😭",
        "😤",
        "😠",
        "😡",
        "🤬",
        "🤯",
        "😳",
        "🥵",
        "🥶",
        "😱",
        "😨",
        "😰",
        "😥",
        "😓",
        "🤗",
        "🤔",
        "🤭",
        "🤫",
        "🤥",
        "😶",
        "😐",
        "😑",
        "😒",
        "🙄",
        "😮",
        "😲",
        "😴",
        "😷",
        "🤒",
        "🤕",
        "🤢",
        "🤮",
        "🤧",
        "😈",
        "👿",
        "👹",
        "👺",
        "💀",
        "☠️",
        "👻",
        "👽",
        "👾",
        "🤖",
        "💩",
        "😺",
        "😸",
        "😹",
        "😻",
        "😼",
        "😽",
        "🙀",
        "😿",
        "😾",
        "👐",
        "🤲",
        "👏",
        "🙌",
        "👋",
        "🤚",
        "🖐",
        "✋",
        "🖖",
        "👌",
        "🤏",
        "✌️",
        "🤞",
        "🤟",
        "🤘",
        "👈",
        "👉",
        "👆",
        "👇",
        "☝️",
        "✋",
        "🤚",
        "🖐",
        "🖕",
        "👀",
        "👂",
        "👃",
        "👅",
        "👄",
        "👶",
        "🧒",
        "👦",
        "👧",
        "👨",
        "👩",
        "🧑",
        "👴",
        "👵",
        "👶",
      ],
    };
  },
  methods: {
    backClick() {
      uni.navigateBack();
    },
    // 显示更多选项
    showMore() {
      uni.showActionSheet({
        itemList: ["查看课程信息", "查看成员列表", "设置提醒", "退出群聊"],
        success: function (res) {
          console.log("选中了第" + (res.tapIndex + 1) + "个按钮");
        },
        fail: function (res) {
          console.log(res.errMsg);
        },
      });
    },

    // 发送消息
    sendMessage() {
      if (!this.inputValue.trim()) return;

      // 这里添加发送消息的逻辑
      console.log("发送消息:", this.inputValue);

      // 清空输入框
      this.inputValue = "";

      // 隐藏扩展面板
      this.showToolExtend = false;
      this.showEmojiPanel = false;

      // 滚动到底部
      this.scrollToBottom();
    },

    // 切换输入模式（文字/语音）
    toggleInputMode() {
      this.isInputMode = !this.isInputMode;
    },

    // 切换更多工具面板
    toggleMoreTools() {
      this.showToolExtend = !this.showToolExtend;
      this.showEmojiPanel = false;
    },

    // 切换表情面板
    toggleEmoji() {
      this.showEmojiPanel = !this.showEmojiPanel;
      this.showToolExtend = false;
    },

    // 插入表情
    insertEmoji(emoji) {
      this.inputValue += emoji;
    },

    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          console.log("选择图片:", res.tempFilePaths);
          // 这里添加发送图片的逻辑
        },
      });
      this.showToolExtend = false;
    },

    // 选择视频
    chooseVideo() {
      uni.chooseVideo({
        sourceType: ["album", "camera"],
        maxDuration: 60,
        camera: "back",
        success: (res) => {
          console.log("选择视频:", res.tempFilePath);
          // 这里添加发送视频的逻辑
        },
      });
      this.showToolExtend = false;
    },

    // 发送文件
    sendFile() {
      uni.chooseMessageFile({
        count: 1,
        type: "file",
        success: (res) => {
          console.log("选择文件:", res.tempFiles);
          // 这里添加发送文件的逻辑
        },
      });
      this.showToolExtend = false;
    },

    // 拍照
    takePhoto() {
      const ctx = uni.createCameraContext();
      ctx.takePhoto({
        quality: "high",
        success: (res) => {
          console.log("拍照:", res.tempImagePath);
          // 这里添加发送图片的逻辑
        },
      });
      this.showToolExtend = false;
    },

    // 预览图片
    previewImage(url) {
      uni.previewImage({
        urls: [url],
      });
    },

    // 下载文件
    downloadFile() {
      uni.showLoading({
        title: "下载中...",
      });

      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "下载完成",
          icon: "success",
        });
      }, 2000);
    },
    // 滚动到底部
    scrollToBottom() {
      setTimeout(() => {
        this.$refs.chatContent.scrollTop = this.$refs.chatContent.scrollHeight;
      }, 100);
    },
  },
  mounted() {
    // 页面加载完成后滚动到底部
    this.scrollToBottom();
  },
};
</script>
<style lang="scss">
.chat-content {
  flex: 1;
  overflow-y: auto;
  padding: 20rpx;
}

.system-message {
  text-align: center;
  margin: 20rpx 0;
}

.system-message text {
  background-color: #e5e5e5;
  color: #888;
  font-size: 24rpx;
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
}

.message-item {
  display: flex;
  margin-bottom: 20rpx;
  align-items: flex-start;
}

.message-item.left {
  justify-content: flex-start;
}

.message-item.right {
  justify-content: flex-end;
}
.message-item.system {
  justify-content: center;
}
.message-content {
  max-width: 70%;
  margin: 0 20rpx;
}

.message-name {
  font-size: 24rpx;
  color: #888;
  margin-bottom: 6rpx;
  padding-left: 4rpx;
}

.message-bubble {
  position: relative;
  padding: 16rpx 24rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  line-height: 1.5;
}

.message-item.left .message-bubble {
  background-color: #fff;
  border: 1rpx solid #eee;
}

.message-item.right .message-bubble {
  background-color: #007aff;
  color: #fff;
}

.message-image {
  max-width: 100%;
  max-height: 300rpx;
  border-radius: 6rpx;
}

.link {
  padding: 10rpx;
  background-color: #f5f5f5 !important;
  color: #333 !important;
  display: flex;
  flex-direction: column;
  width: 400rpx;
}

.link-title {
  font-weight: 500;
  margin-bottom: 4rpx;
}

.link-desc {
  font-size: 24rpx;
  color: #888;
}

.file {
  padding: 16rpx 20rpx !important;
  background-color: #f5f5f5 !important;
  color: #333 !important;
  display: flex;
  align-items: center;
  width: 420rpx;
}

.file-info {
  flex: 1;
  margin: 0 16rpx;
}

.file-name {
  font-weight: 500;
  margin-bottom: 4rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280rpx;
}

.file-size {
  font-size: 24rpx;
  color: #888;
}

.video {
  position: relative;
  padding: 0 !important;
  width: 400rpx;
  height: 240rpx;
}

.video-cover {
  width: 100%;
  height: 100%;
  border-radius: 8rpx;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  padding: 10rpx;
}

.video-duration {
  position: absolute;
  bottom: 10rpx;
  right: 10rpx;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 24rpx;
  padding: 2rpx 8rpx;
  border-radius: 12rpx;
}

.input-area {
  padding: 16rpx 20rpx;
  background-color: #f8f8f8;
  border-top: 1rpx solid #eee;
  display: flex;
  align-items: center;
}

.toolbar {
  display: flex;
  width: 80rpx;
  justify-content: center;
}

.message-input {
  flex: 1;
  margin: 0 10rpx;
  background-color: #fff;
  border-radius: 40rpx;
  padding: 12rpx 24rpx;
  min-height: 60rpx;
  max-height: 180rpx;
}

.tool-extend {
  background-color: #f8f8f8;
  border-top: 1rpx solid #eee;
  padding: 20rpx 0;
  display: flex;
  justify-content: space-around;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tool-item text {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
}

.emoji-panel {
  background-color: #f8f8f8;
  border-top: 1rpx solid #eee;
  padding: 20rpx;
}

.emoji-group {
  display: flex;
  flex-wrap: wrap;
}

.emoji-item {
  font-size: 36rpx;
  padding: 10rpx 16rpx;
}
</style>
